<style>
    .biaoti {
        /*border-bottom: 1px solid #ccc;*/
        padding: 10px;
        box-sizing: border-box;
        background: #e3eced;
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #666;
        margin-bottom: 20px;
    }

    .biaoti .xian {
        width: 8px;
        height: 20px;
        background: #18bc9c;
        margin-right: 10px;
    }

    .kk {
        width: 49%;
        background: #fff;
    }

    body {
        background: #f2f2f2 !important;
    }

    .is-dialog #main {
        background: #f2f2f2 !important;
    }

    .tabs {
        background: #fff;
        margin-top: 20px;
    }

    .tabs-content {
        display: flex;
        flex-direction: column;
        /*padding-top: 20px;*/
        width: 100%;
        margin: auto;
    }

    .tab-content .tab-labels {
        line-height: 40px;
    }

    .tabs-content > .tab {
        display: none;
    }

    .tabs-content > .tab {
        margin-bottom: 30px;
    }

    .tabs-content > div.active {
        display: block;
    }

    .tabs .col-sm-2 {
        width: 100%;
        text-align: left;
    }

    .tab-labels {
        /*padding: 10px;*/
        box-sizing: border-box;
        background: #e3eced;
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
    }

    .tab-labels .xian {
        width: 8px;
        height: 20px;
        background: #18bc9c;
        margin-right: 10px;
        margin-left: 10px;
    }

    .tcxm-td td {
        background: #4e73df;
        color: #fff;
        text-align: center;
        border-right: 1px solid;
    }

    .form-inline input {
        width: 100% !important;
    }
    .form-inline select {
        width: 100% !important;
    }

    .form-inline td {
        border-right: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
        text-align: center;
    }

    .tab-label {
        width: 100px;
        text-align: center;
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        border-radius: 4px;
        margin-left: 40px;
        margin-bottom: 0;
    }

    .tab-label:nth-child(1) {
        margin-left: 10px;
    }

    .tab-label.active {
        background: #4e73df;
        color: #fff;
    }
    input{
        background-color: #fff!important;
    }
    select{
        background-color: #fff!important;
    }
    textarea{
        background-color: #fff!important;
    }
    .tab-top-label{
        height: 40px;
        line-height: 40px;
    }
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
    <div style="display: flex;width:100%;justify-content: space-between">
        <div class="kk">
            <div class="biaoti">
                <div class="xian"></div>
                车主信息
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Car_num')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-car_owner" class="form-control" name="row[car_num]" type="text" value="{$res.car_num}" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">{:__('Phone')}:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-car_card" class="form-control" name="row[phone]" type="text" value="{$res.phone}" readonly>
                </div>
            </div>
        </div>
    </div>
    <div class="tabs">
        <div class="tab-top-label">
            <!--            <div class="xian"></div>-->
<!--            <label class="tab-label active" for="tab1">补偿催办信息</label>-->
        </div>
        <div class="tabs-content">
            <div id="tab1" class="tab active">
                <div class="tab-labels">
                    <div class="xian"></div>
                    补偿催办列表
                </div>
                <div class="form-group zhanshi">
                    <label class="control-label col-xs-12 col-sm-2"></label>
                    <div class="col-xs-12 ">
                        <button class="tab-label2 btn btn-primary btn-embossed style1" type="button" style="margin-left: 10px;background-color: #1b4fe7" onclick="AddRow()">增加
                        </button>
                    </div>
                </div>
                <div class="form-group" style="margin-bottom: 0">
                    <div class="col-xs-12">
                        <table class="table fieldlist" data-template="basictpl" data-name="res[basic]"
                               id="first-table1">
                            <tr class="tcxm-td">
                                <td style="width: 200px;">{:__('录入时间')}</td>
                                <td style="width: 200px;">{:__('录入人')}</td>
                                <td style="width: 100px;">{:__('类别')}</td>
                                <td style="width: 150px;">{:__('来电手机号')}</td>
                                <td>{:__('备注')}</td>
                                <td>{:__('操作')}</td>
                            </tr>
                            {empty name="row"}
                            <tr class="form-inline">
                                <td class="idd" style="display: none"><input type="hidden" name="row[id]" value="0"></td>
                                <td class="tt">{:date('Y-m-d H:i:s')}
                                    <input type="hidden" name="row[date]" value="{:date('Y-m-d H:i:s')}" ></td>
                                <td class="name">{$admin.username}
                                    <input type="hidden" class="username" name="row[user_name]" value="{$admin.username}">
                                    <input type="hidden" class="userid" name="row[user_id]" value="{$admin.id}">
                                </td>
                                <td class="type">
                                    <select class="form-control">
                                        <option value="1">报案</option>
                                        <option value="2">咨询</option>
                                        <option value="3">退费</option>
                                        <option value="4">理赔</option>
                                        <option value="5">催办</option>
                                        <option value="6">投诉</option>
                                    </select>
                                </td>
                                <td>{$res.phone}</td>
                                <td class="content"><textarea type="text"  class="form-control" name="row[content]" style="width: 100%;height: 100px;"/></textarea></td>
                                <td style="width: 240px;" class="caozuo">
                                    <input class="save" type="button"  value="保存"
                                           style="width:50px!important;height:30px;border: none;background:#3683D3 !important;color: #fff;">
                                </td>
                            </tr>
                            {/empty}
                            {volist name="row" id="vo"}
                            <tr class="form-inline">
                                <td class="idd" style="display: none"><input type="hidden" name="row[id]" value="{$vo.id}"></td>
                                <td class="tt">{$vo.date}
                                    <input type="hidden" name="row[date]" value="{$vo.date}" ></td>
                                <td class="name">{$vo.user_name}
                                    <input type="hidden" class="username" name="row[user_name]" value="{$vo.user_name}">
                                    <input type="hidden" class="userid" name="row[user_id]" value="{$vo.user_id}">
                                </td>
                                <td class="type">
                                    <?php if(in_array(457,$rules)){ ?>
                                    <select class="form-control">
                                        <option value="1"  <?php if($vo['type']=="1"){?> selected<?php }?>>报案</option>
                                        <option value="2" <?php if($vo['type']=="2"){?> selected<?php }?>>咨询</option>
                                        <option value="3" <?php if($vo['type']=="3"){?> selected<?php }?>>退费</option>
                                        <option value="4" <?php if($vo['type']=="4"){?> selected<?php }?>>理赔</option>
                                        <option value="5" <?php if($vo['type']=="5"){?> selected<?php }?>>催办</option>
                                        <option value="6" <?php if($vo['type']=="6"){?> selected<?php }?>>投诉</option>
                                    </select>
                                    <?php }else{ ?>
                                    <select class="form-control" disabled>
                                        <option value="1"  <?php if($vo['type']=="1"){?> selected<?php }?>>报案</option>
                                        <option value="2" <?php if($vo['type']=="2"){?> selected<?php }?>>咨询</option>
                                        <option value="3" <?php if($vo['type']=="3"){?> selected<?php }?>>退费</option>
                                        <option value="4" <?php if($vo['type']=="4"){?> selected<?php }?>>理赔</option>
                                        <option value="5" <?php if($vo['type']=="5"){?> selected<?php }?>>催办</option>
                                        <option value="6" <?php if($vo['type']=="6"){?> selected<?php }?>>投诉</option>
                                    </select>
                                    <?php } ?>

                                </td>
                                <td>{$vo.phone}</td>
                                <td class="content">

                                    <?php if(in_array(457,$rules)){ ?>
                                    <textarea type="text"  class="form-control" name="row[content]" style="width: 100%;min-height: 30px;"/>{$vo.content}</textarea>
                                    <?php }else{ ?>
                                    <textarea type="text"  class="form-control" name="row[content]" readonly style="width: 100%;min-height: 30px;"/>{$vo.content}</textarea>
                                    <?php } ?>
                                </td>
                                <td style="width: 240px;" class="caozuo">
                                    <input class="save" type="button"  value="保存" style="width:50px!important;height:30px;border: none;background:#3683D3 !important;color: #fff;">
                                </td>
                            </tr>
                            {/volist}

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<script src="/assets/js/ace1.4/assets/js/jquery.min.js" type="text/javascript"></script>
<script>
    //追加信息
    function AddRow() {
        var now = Moment();
        var time = now.format('YYYY-MM-DD HH:mm:ss');
        var html = `<tr class="form-inline">
<td class="idd" style="display: none"><input type="hidden" name="row[id]" value="0"></td>
<td class="tt">` + time + `
<input type="hidden" class="tt" name="row[date][]" value="` + time + `">
</td>
<td class="name">{$admin.username}<input type="hidden" class="username" name="row[user_name][]" value="{$admin.username}"><input type="hidden" name="row[user_id][]" class="userid" value="{$admin.id}"></td>
<td class="type">
    <select class="form-control">
        <option value="1">报案</option>
        <option value="2">咨询</option>
        <option value="3">退费</option>
        <option value="4">理赔</option>
        <option value="5">催办</option>
        <option value="6">投诉</option>
    </select>
</td>
<td>{$res.phone}</td>
<td class="content"><textarea type="text"  class="form-control" name="row[content]"  style="width: 100%;min-height: 30px;"/></textarea></td>
<td style="width: 240px;" class="caozuo">
<input class="save" type="button"  value="保存" style="width:50px!important;height:30px;border: none;background:#3683D3 !important;color: #fff;"></td>
</tr>`;
        $('#first-table1').append(html);
    }

    //保存客服信息
    $(document).on("click", ".save", function () {
        var that = $(this);
        var date=that.parents(".form-inline").find(".tt input").val()
        var name=that.parents(".form-inline").find(".name .username").val()
        var userid=that.parents(".form-inline").find(".name .userid").val()
        var content=that.parents(".form-inline").find(".content textarea").val()
        var type=that.parents(".form-inline").find(".type select").val()
        var id=that.parents(".form-inline").find(".idd input").val()
        $.ajax({
            type: 'post',
            url: "{:url('cuiban/buchang/save_list')}", //发送路径
            data: {
                date:date,
                name:name,
                userid:userid,
                content:content,
                type:type,
                bid:{$res.id},
                id:id
            }, //发送的数据
            async: false, //是否异步
            success: function(res) {
                if(res.code==1){
                    layer.msg('保存成功')
                    if (!Config.rule.includes('457') && !Config.rule.includes(457)) {
                        that.hide();
                        that.parents(".form-inline").find(".caozuo select").attr('disabled','disabled')
                        that.parents(".form-inline").find(".content textarea").attr('disabled','disabled')
                        that.parents(".form-inline").find(".type select").attr('disabled','disabled')
                    }
                    if(res.data.id){
                        that.parents(".form-inline").find(".idd input").val(res.data.id)
                    }
                }else{
                    layer.alert(res.message)
                }
            },
            error:function (err){
                layer.msg('保存失败')
            }
        })
    })
</script>
